<template>
  <vxe-modal
    :title=title
    v-model="dialogVisible"
    :loading="loadings" height="93vh"
    width="90%" showFooter esc-closable show-zoom resize>
    <!-- 顶部搜索 -->
    <el-form :model="queryParams" ref="queryForm" size="mini" v-show="showSearch" label-width="75px">
      <el-row :gutter="24">
        <el-col :span="8">
          <el-form-item label="年度:" prop="nd">
            <el-select @change="getList" v-model="queryParams.nd" placeholder="请选择年度" clearable>
              <el-option
                v-for="dict in dict.type.year"
                :key="dict.value"
                :label="dict.label"
                :value="dict.value"
              />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="锁定状态:" prop="sdZt">
            <el-select @change="getList" v-model="queryParams.sdZt" placeholder="请选择锁定状态" clearable>
              <el-option
                v-for="dict in dict.type.sdzt"
                :key="dict.value"
                :label="dict.label"
                :value="dict.value"
              />
            </el-select>
          </el-form-item>
        </el-col>
<!--        <el-col :span="12">-->
<!--          <el-form-item>-->
<!--            <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>-->
<!--            <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>-->
<!--          </el-form-item>-->
<!--        </el-col>-->
      </el-row>
    </el-form>

    <!-- 表格 -->
    <el-table show-summary sum-text="汇总" :summary-method="getSummaries"
              ref="table" highlight-current-row height="650" :stripe="false" :row-class-name="tableRowClassName"
              :header-cell-style="{background:'#d0cece',color:'#000000',fontWeight:'bold'}"
              v-loading="loading" :data="ybfyList">
      <el-table-column label="序号" align="center" prop="xh" width="60"/>
      <el-table-column header-align="center" show-overflow-tooltip label="科目" prop="km" width="250"/>
      <el-table-column show-overflow-tooltip label="1月" align="center" prop="month1"/>
      <el-table-column show-overflow-tooltip label="2月" align="center" prop="month2"/>
      <el-table-column show-overflow-tooltip label="3月" align="center" prop="month3"/>
      <el-table-column show-overflow-tooltip label="4月" align="center" prop="month4"/>
      <el-table-column show-overflow-tooltip label="5月" align="center" prop="month5"/>
      <el-table-column show-overflow-tooltip label="6月" align="center" prop="month6"/>
      <el-table-column show-overflow-tooltip label="7月" align="center" prop="month7"/>
      <el-table-column show-overflow-tooltip label="8月" align="center" prop="month8"/>
      <el-table-column show-overflow-tooltip label="9月" align="center" prop="month9"/>
      <el-table-column show-overflow-tooltip label="10月" align="center" prop="month10"/>
      <el-table-column show-overflow-tooltip label="11月" align="center" prop="month11"/>
      <el-table-column show-overflow-tooltip label="12月" align="center" prop="month12"/>
      <el-table-column show-overflow-tooltip label="年度总计" align="center" prop="ndZj"/>
    </el-table>

    <div slot="footer" class="dialog-footer dialog-footer-center">
      <el-button @click="dialogVisible=false">关闭</el-button>
    </div>

  </vxe-modal>
</template>

<script>
import {selectYbFyList} from "@/api/fztz/xmls";

export default {
  name: "YbFy",
  dicts: ['year', 'sdzt'],
  data() {
    return {
      loading: false,
      title: null,
      dialogVisible: false,
      loadings: false,
      // 显示搜索条件
      showSearch: true,
      // 查询参数
      queryParams: {
        xmsbId: null,
        nd: new Date().getFullYear().toString(),
        sdZt: '锁定',
      },
      ybfyList: [], //月报费用表格
    }
  },
  watch: {
    ybfyList: {
      handler(newVal) {
        // 数据发生变化后重新计算汇总信息
        this.$nextTick(() => {
          this.$refs.table.doLayout();
        });
      },
      deep: true
    }
  },
  methods: {
    getSummaries(param) {
      const {columns, data} = param;
      const sums = [];
      columns.forEach((column, index) => {
        if (index === 1) {
          sums[index] = '汇总';
          return;
        }
        // 过滤掉包含`.`的行
        const values = data.filter(item => !item.xh.includes('.')).map(item => Number(item[column.property]));
        // 对列进行总计核算。
        if (column.property === 'month1' || column.property === 'month2' || column.property === 'month3'
          || column.property === 'month4' || column.property === 'month5' || column.property === 'month6'
          || column.property === 'month7' || column.property === 'month8' || column.property === 'month9'
          || column.property === 'month10' || column.property === 'month11' || column.property === 'month12'
          || column.property === 'ndZj') {
          if (!values.every(value => isNaN(value))) {
            sums[index] = values.reduce((prev, curr) => {
              const value = Number(curr);
              if (!isNaN(value)) {
                return prev + curr;
              } else {
                return prev;
              }
            }, 0);
            sums[index] += ''; // 转换为字符串以便表格显示
          } else {
            sums[index] = '---'; // 如果所有值都是NaN，则显示---
          }
        }
      });
      return sums;
    },
    //行内背景颜色
    tableRowClassName: function ({row, rowIndex}) {
      if (!row.xh.includes('.')) {
        return 'warm-rows'
      }
    },
    handleOpen(row) {
      this.loadings = true
      this.rowData = row
      this.title = '【' + row.xmName + '】 月报费用查看'
      this.dialogVisible = true
      // this.queryParams.nd = new Date().getFullYear().toString()
      this.getList();
    },
    /** 搜索按钮操作 */
    handleQuery() {
      this.getList();
    },
    getList() {
      this.loading = true
      this.queryParams.xmsbId = this.rowData.xmsbId
      selectYbFyList(this.queryParams.xmsbId, this.queryParams.nd, this.queryParams.sdZt).then(res => {
        this.ybfyList = res.data
        this.loading = false
        this.loadings = false
      })
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.resetForm("queryForm");
      this.handleQuery();
    },
  }
}
</script>

<style lang="scss">
.warm-rows {
  background-color: #66fdd5 !important;
  font-weight: 700;
  font-size: 13.5px;
}
</style>
